<!-- 个人中心 -->
<template>
  <div class="index-container">
    <div class="avater-head-box">
      <div class="avater-head">
        <div class="avater-head-img">
          <van-image
            fit="cover"
            :src="state.avatar ? state.avatar : state.icon_hand"
            alt=""
          />
        </div>
        <div class="avater-head-content">
          <h5>{{ state.nickName ? state.nickName : "未登录" }}</h5>
          <div class="avater-label" v-if="state.nickName">
            <img :src="state.Img10" />
            <span>{{ state.levelName }}</span>
          </div>
        </div>
      </div>
      <div class="avater-head-right" @click="openMember()">
        <img :src="state.Img11" />
      </div>
    </div>
    <div class="in-common-use-main">
      <van-grid :column-num="3" :border="false" :gutter="0">
        <van-grid-item v-for="item in state.feature" :key="item.id">
          <div class="in-common-use-item" @click="openAction(item)">
            <van-icon :name="item.icon" size="20" color="#ccc" /><span>{{
              item.name
            }}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="infor-main">
      <van-cell-group inset>
        <van-cell value="去充值" is-link @click="HandleCell(5)">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="points-main">
              <!-- <span>余额</span> -->
              <img class="points-img" src="../../assets//image/img13.png" />
              <span>{{ state.points }}</span>
            </div>
          </template>
        </van-cell>
        <van-cell title="地址管理" is-link @click="HandleCell(6)" />
        <van-cell title="网站客服" is-link @click="HandleCell(1)" />
        <van-cell title="投诉反馈" is-link @click="HandleCell(2)" />
        <van-cell title="个人设置" is-link @click="HandleCell(3)" />
        <van-cell title="修改密码" is-link @click="HandleCell(4)" />
      </van-cell-group>
    </div>
  </div>
  <van-dialog
    v-model:show="isDiaShow"
    :title="title"
    show-cancel-button
    :confirmButtonText="confirmText"
    :before-close="confirm"
  >
    <div class="customer-main" v-if="title == '网站客服'">
      <img src="../../assets/image/img06.jpg" alt="" />
      <div class="customer-main-text">保存二维码添加客服</div>
    </div>
    <div class="field-main" v-if="title == '投诉反馈'">
      <van-field
        label-width="32"
        v-model="fieldValue"
        name="fieldName"
        type="textarea"
        border
        placeholder="请输入反馈意见"
      />
    </div>
    <div class="field-main" v-if="title == '修改密码'">
      <van-field
        label-width="32"
        v-model="oldPassword"
        name="原密码"
        placeholder="请输入原密码"
      />
      <van-field
        label-width="32"
        v-model="newPassword"
        name="新密码"
        placeholder="请输入新密码"
      />
    </div>
  </van-dialog>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import icon_hand from "@/assets/image/icon_hand3.png";
import Img10 from "@/assets/image/img10.png";
import Img11 from "@/assets/image/img11.png";
import { showToast } from "vant";
import head from "@/assets/image/icon_hand1.png";

const route = useRoute();
const router = useRouter();
const state = reactive({
  icon_hand,
  Img10,
  Img11,
  nickName: "",
  levelName: "",
  points: 0,
  head,
  avatar: "",
  feature: [
    {
      id: 1,
      icon: "star-o",
      name: "关注",
      routeName: "follow",
    },
    {
      id: 2,
      icon: "like-o",
      name: "收藏",
      routeName: "collect",
    },
    {
      id: 3,
      icon: "bookmark-o",
      name: "订单",
      routeName: "order",
    },
  ],
});

const openAction = (item) => {
  router.push({
    name: item.routeName,
  });
};

const updateUserInfo = () => {
  if (localStorage.getItem("userInfo")) {
    let uVip = [
      { label: "普通会员", value: 0 },
      { label: "超值月卡", value: 1 },
      { label: "超值季卡", value: 2 },
      { label: "超值年卡", value: 3 },
      { label: "永久会员", value: 4 },
    ];
    let u = JSON.parse(localStorage.getItem("userInfo"));
    let item = uVip.find((o) => o.value == u.level);
    state.nickName = u.nickname;
    state.levelName = item.label;
    state.avatar = u.avatar;
    state.points = u.points;
  }
};

const openMember = () => {
  router.push({
    name: "memberCenter",
  });
};

let title = ref("网站客服");
let confirmText = ref("确认");
let isDiaShow = ref(false);

const emits = defineEmits(["GoldCoinRecharge"]);

const HandleCell = (types) => {
  // 联系客服
  if (types == 1) {
    title.value = "网站客服";
    confirmText.value = "复制微信号";
    isDiaShow.value = true;
  }

  // 投诉反馈
  if (types == 2) {
    title.value = "投诉反馈";
    confirmText.value = "确认";
    isDiaShow.value = true;
  }
  // 个人设置
  if (types == 3) {
    router.push({
      name: "setting",
    });
  }
  // 修改密码
  if (types == 4) {
    title.value = "修改密码";
    oldPassword.value = "";
    newPassword.value = "";
    isDiaShow.value = true;
  }
  // 充值金币
  if (types == 5) {
    emits("GoldCoinRecharge");
  }
  if (types == 6) {
    router.push({
      name: "address",
    });
  }
};

import { updatePassword, userfeedback } from "@/api/user.js";

let fieldValue = ref("");
let oldPassword = ref("");
let newPassword = ref("");
const confirm = (action) =>
  new Promise(async (resolve) => {
    console.log(action, "action");
    if (action !== "confirm") {
      resolve(true);
    } else {
      if (title.value == "网站客服") {
        navigator.clipboard
          .writeText("Liuni_2002")
          .then(() => {
            showToast("微信号复制成功！");
            resolve(false);
          })
          .catch((err) => {
            resolve(true);
          });
      }
      console.log(action, "action", fieldValue.value, "88");
      // resolve(true);
      if (title.value == "投诉反馈") {
        if (fieldValue.value == "") {
          let msg = "请输入投诉反馈";
          showToast(msg);
          resolve(false);
        } else {
          let params = {
            feedbackContent: fieldValue.value,
          };
          try {
            let data = await userfeedback(params);
            showToast("提交成功，反馈结果稍后请在内查看！");
            resolve(true);
          } catch (error) {
            resolve(false);
          }
        }
      }

      if (title.value == "修改密码") {
        if (oldPassword.value == "") {
          showToast("请输入原密码");
          resolve(false);
          return;
        }
        if (newPassword.value == "") {
          showToast("请输入新密码");
          resolve(false);
          return;
        }
        let data = await updatePassword({
          oldPassword: oldPassword.value,
          newPassword: newPassword.value,
        });
        showToast("密码修改成功");
        resolve(true);
      }
      // resolve(true);
      // showToast(msg);
      // resolve(true);
    }
  });
import { getUserInfo } from "@/api/user.js";

const getUserInfoData = async () => {
  let { data } = await getUserInfo();
  localStorage.setItem("userInfo", JSON.stringify(data));
  updateUserInfo();
};

onMounted(() => {
  getUserInfoData();
});
</script>

<style lang="scss" scoped>
.index-container {
  padding-top: 70px;
}
.avater-head-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  z-index: 666;
  .avater-head-right {
    width: 25vw;
    img {
      display: flex;
      width: 100%;
    }
  }
}
.avater-head {
  display: flex;
  align-items: center;
  h5 {
    font-weight: normal;
    font-size: 16px;
    color: #666;
  }
  .avater-head-img {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    overflow: hidden;
    margin-right: 10px;
    .van-img {
      width: 100%;
    }
  }
}
.avater-label {
  padding: 1px 2px;
  border-radius: 4px;
  background: #c5a387;
  display: flex;
  align-items: center;
  img {
    width: 10px;
    margin-right: 3px;
  }
  span {
    color: #fff;
    font-size: 10px;
    display: block;
  }
}
.infor-main {
  margin-top: 15px;
}

.customer-main {
  padding-top: 20px;
  img {
    width: 90%;
    margin: 0 5%;
    display: block;
  }
  .customer-main-text {
    text-align: center;
    color: #999;
    margin: 5px 0;
  }
}

.field-main {
  border: 1px solid #f2f2f2;
  margin: 10px;
}

.in-common-use-main {
  margin: 10px 15px 0 15px;
  border-radius: 8px;
  overflow: hidden;
}

.in-common-use-item {
  text-align: center;
  display: flex;
  align-items: center;
  span {
    margin-left: 5px;
    font-size: 16px;
    display: block;
    line-height: 1;
  }
}
.points-main {
  display: flex;
  align-items: center;
  .points-img {
    width: 20px;
    margin-right: 5px;
  }
}
</style>
